<template>
  <div class="flex-container">
  <heads></heads>
    <swp></swp>
    <!-- <el-row type="flex" justify="center">
      <el-col>
        <div class="Products">我们的产品</div>
      </el-col>
    </el-row>
    <el-row :gutter="100" class="xys" type="flex" justify="center">
      <el-col :xs="5" :sm="6" :md="8" :lg="5" :xl="5">
        <div class="grid-content bg-purple-light">
          <img src="../assets/logo.png" alt="" />
          <span>智能机器人</span>
        </div>
      </el-col>
      <el-col :xs="5" :sm="6" :md="8" :lg="5" :xl="5">
        <div class="grid-content bg-purple-light">
          <img src="../assets/logo.png" alt="" />
          <span>智能投资顾问</span>
        </div>
      </el-col>
      <el-col :xs="5" :sm="6" :md="8" :lg="5" :xl="5">
        <div class="grid-content bg-purple-light">
          <img src="../assets/logo.png" alt="" />
          <span>智能预测工具</span>
        </div>
      </el-col>
    </el-row> -->
    <!-- 单数板块 -->
    
    <el-row class="detailPart" v-for="item,index in list" :key="index">
      <el-col>
        <div class="topBox">
          <img class="tMg" src="../assets/logo.png" alt="" />
          <h1> {{ item.productName }}</h1>
        </div>
        <div class="btmBox">
          <div class="leftPart">
            <p>
            {{ item.describe }}
            </p>
          </div>
          <div class="rightPart">
            <img class="mgB" :src="'http://'+item.imageUrl" alt="" />
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 双数板块 -->
    <!-- <el-row class="detailPart2">
      <el-col>
        <div class="topBox">
          <h1>智能机器人</h1>
        </div>
        <div class="btmBox">
          <div class="leftPart">
            <img class="mgB" src="../assets/u138.png" alt="" />
          </div>
          <div class="rightPart">
            <p>
              智能机器人是一种以人工智能技术为核心的智能化机器,它能够感知、理解、学习和交互。智能机器人具备自主决策和执行能力，可以适应不同环境、完成特定任务，并与人类进行沟通和合作。
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="detailPart">
      <el-col>
        <div class="topBox">
          <img class="tMg" src="../assets/logo.png" alt="" />
          <h1>智能机器人</h1>
        </div>
        <div class="btmBox">
          <div class="leftPart">
            <p>
              智能机器人是一种以人工智能技术为核心的智能化机器,它能够感知、理解、学习和交互。智能机器人具备自主决策和执行能力，可以适应不同环境、完成特定任务，并与人类进行沟通和合作。
            </p>
          </div>
          <div class="rightPart">
            <img class="mgB" src="../assets/u138.png" alt="" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="detailPart3">
      <el-col class="boxPos">
        <div class="centerBox">
          <h1>智能机器人</h1>
          <p>
            我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的
            技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
          </p>
        </div>
      </el-col>
    </el-row> -->
    <foot></foot>
  </div>
</template>
<script>
import heads from "@/components/header/heads.vue";
import swp from "@/components/swipwe.vue";
import foot from "@/components/footer.vue";
import {get} from "@/request/http"
export default {
  data(){
    return{
      list:[]
    }
  },
  components: {
    heads,
    swp,
    foot,
  },
  methods:{
   async getlist(){
       let res = await get("/api/product/list")
       console.log("res",res);
       this.list = res.data.data.splice(0,3)
    }
  },
  mounted(){
    this.getlist()
  }
};
</script>
<style scoped lang="scss">
.xys {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 100;
  // flex-wrap: wrap;
}
@media screen and (max-width: 1500px) {
  .bg-purple-light {
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 750px) {
  .xys {
    // justify-content: center;
    background-color: red;
  }
}
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  // background: #d3dce6;
  margin-bottom: 20px;
}

.bg-purple {
  height: 430px;
  img {
    width: 100%;
    height: 100%;
  }
}

.bg-purple-light {
  // background: #e5e9f2;
  display: flex;
  justify-content: space-around;
  height: 60px;
  line-height: 40px;
  font-size: 20px;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 50%;
  margin-left: 30px;
  // min-width: 300px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 4px;
  }
  span {
    white-space: nowrap;
    margin-left: 30px;
  }
}
.footer-content {
  padding: 20px; /* 添加内边距 */
  color: #666; /* 设置文本颜色 */
}
.Products {
  text-align: center;
  margin-top: 65px;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 60px;
}
.detailPart {
  width: 100%;
  max-width: 1200px; // 设置最大宽度
  margin: 0 auto; // 水平居中
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center; // 垂直居中
  box-sizing: border-box;
  .topBox {
    display: flex;
    justify-content: start;
  }
  .tMg {
    width: 30px;
    height: 30px;
    margin-top: 13px;
  }
  .leftPart {
    background-image: url("../assets/logo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 300px 300px;
    height: 210px;
    p {
      width: 100%; // 确保段落在小屏幕上也能占满宽度
      max-width: 460px; // 设置最大宽度
      margin: 0 auto; // 水平居中
      height: 51px;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 14px;
      color: #798099;
      line-height: 17px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  h1 {
    max-width: 180px;
    max-height: 52px;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    font-size: 36px;
    color: #383f58;
    line-height: 52px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 40px;
    margin-left: 20px;
  }
  .btmBox {
    display: flex;
    justify-content: space-between;
  }
  .rightPart {
    max-width: 580px;
    max-height: 210px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &:nth-child(2n){
    width: 100%;
  max-width: 1200px; // 设置最大宽度
  margin: 70px auto; // 水平居中
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center; // 垂直居中
  box-sizing: border-box;
  margin-bottom: 70px;
  .topBox {
    display: flex;
    justify-content: end;
  }
  h1 {
    max-width: 180px;
    max-height: 52px;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    font-size: 36px;
    color: #383f58;
    line-height: 52px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 40px;
    margin-left: 20px;
  }
  .leftPart {
    max-width: 580px;
    max-height: 210px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightPart {
    background-image: url("../assets/logo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 300px 300px;
    height: 210px;
    p {
      width: 100%; // 确保段落在小屏幕上也能占满宽度
      max-width: 460px; // 设置最大宽度
      margin: 0 auto; // 水平居中
      height: 51px;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 14px;
      color: #798099;
      line-height: 17px;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }
  }
  .btmBox {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    
  }
  }
}

.detailPart3 {
  width: 100%;
  max-width: 1200px; // 设置最大宽度
  margin: 0 auto; // 水平居中
  padding: 0 10px;
  display: flex;
  align-items: center; // 垂直居中
  box-sizing: border-box;
  margin-top: 70px;
  .boxPos {
    width: 100%;
    max-width: 1200px;
    background-image: url("../assets/u138.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 250px;
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    box-sizing: border-box;
    padding: 20px; // 添加内边距
    .centerBox {
      width: 580px;
      height: 160px;
      background-color: rgba(0, 0, 0, 0.4);
      margin: 60px auto;
      h1 {
        width: 100%;
        max-height: 52px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 36px;
        text-align: center;
        color: #fff;
        line-height: 52px;
        margin: 20px 0;
      }
      p {
        width: 90%;
        font-family: Source Han Sans, Source Han Sans;
        font-size: 14px;
        text-align: center;
        color: #fff;
        margin-left: 35px;
      }
    }
  }
  @media screen and (max-width: 768px) {
    max-width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }
}
</style>
